<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">水质类别占比</div>
    </div>
    <div class="demo-progress">
      <el-progress
        type="circle"
        :percentage="percentage1"
        stroke-width="15"
      >
        <template #default>
          <div style="line-height: 1.2">
            <div style="color: white; font-size: 14px">饮用水质</div>
            <div :style="{ color: '#409EFF' }" style="font-size: 18px">{{ percentage1 }}个</div>
            <div style="color: white; font-size: 12px">增长{{ growth1 }}%</div>
          </div>
        </template>
      </el-progress>

      <el-progress
        type="circle"
        :percentage="percentage2"
        stroke-width="15"
        color="#ef45ac"
      >
        <template #default>
          <div style="line-height: 1.2">
            <div style="color: white; font-size: 14px">生活水质</div>
            <div :style="{ color: '#ef45ac' }" style="font-size: 18px">{{ percentage2 }}个</div>
            <div style="color: white; font-size: 12px">增长{{ growth2 }}%</div>
          </div>
        </template>
      </el-progress>

      <el-progress
        type="circle"
        :percentage="percentage3"
        stroke-width="15"
        color="#613fd1"
      >
        <template #default>
          <div style="line-height: 1.2">
            <div style="color: white; font-size: 14px">自来水</div>
            <div :style="{ color: '#613fd1' }" style="font-size: 18px">{{ percentage3 }}个</div>
            <div style="color: white; font-size: 12px">增长{{ growth3 }}%</div>
          </div>
        </template>
      </el-progress>
    </div>
  </div>
</template>

<style scoped>
.main {
  /* 保持原有定位属性不变 */
  height: 25vh;
  width: 25%;
  min-width: 300px;
  background-color: #0d2b55;
  position: absolute;
  right: 1%;
  top: 38.5vh;
  margin-top: 5px;
}

.demo-progress {
  display: flex;
  justify-content: space-between; /* 新增弹性布局 */
  padding: 10px;

}

/* 修改进度条尺寸 */
.demo-progress .el-progress--circle {
  flex: 1; /* 关键平分属性 */
  margin: 0 5px; /* 替换原有固定边距 */
  max-width: 30%;
  min-width: 80px;
}

/* 调整深层次样式 */
.demo-progress /deep/ .el-progress-circle {
  width: 100% !important;
  height: auto !important;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}
.demo-progress .el-progress--circle {
  margin-top: 35px;
  margin-left: 20px;
}

/* 新增背景轨道样式 */
.demo-progress /deep/ .el-progress-circle__track {
  stroke: rgba(36, 55, 92, 1);
}
</style>

<script>
export default {
  data() {
    return {
      percentage1: 0,
      percentage2: 0,
      percentage3: 0,
      growth1: 2,    // 新增增长率数据
      growth2: 2,
      growth3: 2,
    }
  },
  mounted() {
    this.timer1 = setInterval(() => {
      if(this.percentage1 >= 25) {
        clearInterval(this.timer1)
        return
      }
      this.percentage1 += 1
    }, 30)

    this.timer2 = setInterval(() => {
      if(this.percentage2 >= 50) {  // 第二个进度调整为50%
        clearInterval(this.timer2)
        return
      }
      this.percentage2 += 1
    }, 15)  // 加快动画速度

    this.timer3 = setInterval(() => {
      if(this.percentage3 >= 75) {  // 第三个进度调整为75%
        clearInterval(this.timer3)
        return
      }
      this.percentage3 += 1
    }, 10)  // 更快动画速度
  },
  beforeUnmount() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
  }
}
</script>
